<div class="row justify-content-center">
    <div class="col-10 text-center bg-dark p-4 my-2">
        <p>{{'RSS-CALCULATOR.CLAIM' | translate}}</p>
    </div>
</div>

<div class="row justify-content-center">
    <div class="row col-12 text-center mt-2 justify-content-center">
        <div class="row col-12 col-sm-10 col-md-6 mb-3 justify-content-center">
            <table class="col-11 table table-sm table-stripped table-dark">
                <tr>
                    <th colspan="4">{{'KEYWORD.CARD' | translate}}</th>
                </tr>
                <tr>
                    <th>
                        {{'KEYWORD.CHARACTER' | translate}}
                    </th>
                    <td colspan="3">
                        <mat-radio-group [(ngModel)]="character" (ngModelChange)="setChar()">
                            <mat-radio-button class="mr-2" *ngFor="let c of characters" [value]="c">
                                <img class="img-fluid icon" src="{{'assets/images/小头/' + c + '.webp'}}" alt="{{c}}">
                            </mat-radio-button>
                        </mat-radio-group>
                    </td>
                </tr>
                <tr>
                    <th>
                        {{'KEYWORD.TYPE' | translate}}
                    </th>
                    <td colspan="3">
                        <mat-radio-group [(ngModel)]="type">
                            <mat-radio-button class="mr-2" *ngFor="let t of types" [value]="t">
                                <img class="img-fluid icon" src="{{'assets/images/' + t + '.png'}}" alt="{{t}}">
                            </mat-radio-button>
                        </mat-radio-group>
                    </td>
                </tr>
                <tr>
                    <th>
                        {{'KEYWORD.RARITY' | translate}}
                    </th>
                    <td colspan="3">
                        <mat-radio-group [(ngModel)]="rarity" (ngModelChange)="setRarity()">
                            <mat-radio-button class="mr-2" *ngFor="let r of rarities" [value]="r">
                                {{r}}
                            </mat-radio-button>
                        </mat-radio-group>
                    </td>
                </tr>
                <tr>
                    <th>
                        {{'KEYWORD.LEVEL' | translate}}
                    </th>
                    <td colspan="3" style="padding: 0 2em;">
                        <div class="custom-slider">
                            <ngx-slider [(value)]="lv1" [(highValue)]="lv2" [options]="options" (userChange)="setLevel()">
                            </ngx-slider>
                        </div>
                        
                    </td>
                </tr>
                <tr>
                    <th>
                        {{'KEYWORD.SKILL' | translate}}
                    </th>
                    <td>
                        <select class="form-control" [(ngModel)]="skillA" (ngModelChange)="setSkillRss()">
                            <option value=1>1</option>
                            <option value=2>2</option>
                            <option value=3>3</option>
                            <option value=4>4</option>
                            <option value=5>5</option>
                            <option value=6>6</option>
                            <option value=7>7</option>
                            <option value=8>8</option>
                            <option value=9>9</option>
                            <option value=10>10</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-control" [(ngModel)]="skillB" (ngModelChange)="setSkillRss()">
                            <option value=1>1</option>
                            <option value=2>2</option>
                            <option value=3>3</option>
                            <option value=4>4</option>
                            <option value=5>5</option>
                            <option value=6>6</option>
                            <option value=7>7</option>
                            <option value=8>8</option>
                            <option value=9>9</option>
                            <option value=10>10</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-control" [(ngModel)]="skillC" (ngModelChange)="setSkillRss()">
                            <option value=1>1</option>
                            <option value=2>2</option>
                            <option value=3>3</option>
                            <option value=4>4</option>
                            <option value=5>5</option>
                            <option value=6>6</option>
                            <option value=7>7</option>
                            <option value=8>8</option>
                            <option value=9>9</option>
                            <option value=10>10</option>
                        </select>
                    </td>
                </tr>
            </table>
            <div class="row col-12 gridItem justify-content-around">
                <table class="col-11 col-xl-6 table table-sm table-stripped table-dark">
                    <tr>
                        <th colspan="4">
                            {{'RSS-CALCULATOR.EXP-CHIP' | translate}}
                        </th>
                    </tr>
                    <tr>
                        <td *ngFor="let name of expChipNames">
                            <img class="img-fluid icon" src="{{'assets/images/材料/' + name + '.webp'}}" alt="{{name}}">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type='number' class="form-control" min="0" max="9999" [(ngModel)]="presetExpChips[0]"
                                (ngModelChange)="calculateExpChips()">
                        </td>
                        <td>
                            <input type='number' class="form-control" min="0" max="9999" [(ngModel)]="presetExpChips[1]"
                                (ngModelChange)="calculateExpChips()">
                        </td>
                        <td>
                            <input type='number' class="form-control" min="0" max="9999" [(ngModel)]="presetExpChips[2]"
                                (ngModelChange)="calculateExpChips()">
                        </td>
                        <td>
                            <input type='number' class="form-control" min="0" max="9999" [(ngModel)]="presetExpChips[3]"
                                (ngModelChange)="calculateExpChips()">
                        </td>
                    </tr>
                    <tr>
                        <td *ngFor="let c of usedExpChips">{{c}}</td>
                    </tr>
                </table>
                <table class="col-11 col-xl-5 table table-sm table-stripped table-dark">
                    <tr>
                        <th colspan="3">
                            {{'RSS-CALCULATOR.LV-RSS' | translate}}
                        </th>
                    </tr>
                    <tr>
                        <td>
                            {{'RSS-CALCULATOR.REQUIRED-EXP' | translate}}
                        </td>
                        <td colspan="2">
                            {{requiredExp}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            {{'RSS-CALCULATOR.ACTUAL-COST' | translate}}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{'KEYWORD.LEVEL' | translate}}
                        </td>
                        <td>
                            {{'KEYWORD.EXP' | translate}}
                        </td>
                        <td>
                            <img class="icon" src="assets/images/btn_coin_s.png">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{actualLv}}
                        </td>
                        <td>
                            {{actualExp}}
                        </td>
                        <td>
                            {{actualExpChipCoin}}
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row col-12 col-sm-10 col-md-5 justify-content-around">
            <table class="col-5 col-md-10 table table-sm table-dark text-center">
                <tr>
                    <th colspan="3">{{'RSS-CALCULATOR.EVOLVE-RSS' | translate}}</th>
                </tr>
                <tr>
                    <td><img class="icon" src="assets/images/btn_coin_s.png"></td>
                    <td colspan="2">{{lvCoin}}</td>
                </tr>
                <tr>
                    <td>
                        <img class="icon" src="{{'assets/images/材料/' + charChip + '晶片 Ⅰ.webp'}}"
                            alt="{{charChip + '晶片 Ⅰ'}}">
                    </td>
                    <td>
                        <img class="icon" src="{{'assets/images/材料/' + charChip + '晶片 Ⅱ.webp'}}"
                            alt="{{charChip + '晶片 Ⅱ'}}">
                    </td>
                    <td>
                        <img class="icon" src="{{'assets/images/材料/' + charChip + '晶片 Ⅲ.webp'}}"
                            alt="{{charChip + '晶片 Ⅲ'}}">
                    </td>
                </tr>
                <tr>
                    <td *ngFor="let c of charChips">{{c}}</td>
                </tr>
                <tr>
                    <td>
                        <img class="icon" src="{{'assets/images/材料/' + type + '晶片 Ⅰ.webp'}}" alt="{{type + '晶片 Ⅰ'}}">
                    </td>
                    <td>
                        <img class="icon" src="{{'assets/images/材料/' + type + '晶片 Ⅱ.webp'}}" alt="{{type + '晶片 Ⅱ'}}">
                    </td>
                    <td>
                        <img class="icon" src="{{'assets/images/材料/' + type + '晶片 Ⅲ.webp'}}" alt="{{type + '晶片 Ⅲ'}}">
                    </td>
                </tr>
                <tr>
                    <td *ngFor="let t of typeChips">{{t}}</td>

                </tr>
            </table>
            <table class="col-5 col-md-10 table table-sm table-dark text-center">
                <tr>
                    <th colspan="3">{{'RSS-CALCULATOR.SKILL-LV-RSS' | translate}}</th>
                </tr>
                <tr>
                    <td><img class="icon" src="assets/images/btn_coin_s.png"></td>
                    <td colspan="2">{{skillCoin}}</td>
                </tr>
                <tr>
                    <td><img class="icon" src="{{'assets/images/材料/' + type + '印象 Ⅰ.webp'}}" alt="{{type + '印象 Ⅰ'}}">
                    </td>
                    <td><img class="icon" src="{{'assets/images/材料/' + charRssGroup[0] + '.webp'}}"
                            alt="{{charRssGroup[0]}}"></td>
                    <td><img class="icon" src="{{'assets/images/材料/' + charRssGroup[1] + '.webp'}}"
                            alt="{{charRssGroup[1]}}"></td>
                </tr>
                <tr>
                    <td>{{skillRss[0]}}</td>
                    <td>{{skillRss[1]}}</td>
                    <td>{{skillRss[1]}}</td>
                </tr>
                <tr>
                    <td><img class="icon" src="{{'assets/images/材料/' + type + '印象 Ⅱ.webp'}}" alt="{{type + '印象 Ⅱ'}}">
                    </td>
                    <td><img class="icon" src="{{'assets/images/材料/' + charRssGroup[2] + '.webp'}}"
                            alt="{{charRssGroup[2]}}"></td>
                    <td><img class="icon" src="{{'assets/images/材料/' + charRssGroup[3] + '.webp'}}"
                            alt="{{charRssGroup[3]}}"></td>
                </tr>
                <tr>
                    <td>{{skillRss[2]}}</td>
                    <td>{{skillRss[3]}}</td>
                    <td>{{skillRss[3]}}</td>
                </tr>
                <tr>
                    <td><img class="icon" src="{{'assets/images/材料/' + type + '印象 Ⅲ.webp'}}" alt="{{type + '印象 Ⅲ'}}">
                    </td>
                    <td><img class="icon" src="{{'assets/images/材料/' + charRssGroup[4] + '.webp'}}"
                            alt="{{charRssGroup[4]}}"></td>
                    <td><img class="icon" src="{{'assets/images/材料/' + charRssGroup[5] + '.webp'}}"
                            alt="{{charRssGroup[5]}}"></td>
                </tr>
                <tr>
                    <td>{{skillRss[4]}}</td>
                    <td>{{skillRss[5]}}</td>
                    <td>{{skillRss[5]}}</td>
                </tr>
            </table>
        </div>

    </div>
</div>